.podium-wrap {
  position: relative;
  padding-bottom: 20px;

  #confetti {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 1;
    transition: opacity 25s;

    &.faded {
      opacity: 0;
    }
  }
}

.podium {
  > div {
    @extend %ellipsis;

    display: inline-block;
    text-align: center;

    &.lame {
      opacity: 0.5;
      .user-link {
        text-decoration: line-through;
        font-weight: normal;
      }
      .trophy {
        opacity: 0.3;
        filter: grayscale(100%) contrast(10%);
      }
    }
  }

  .first {
    width: 44%;
    font-size: 1.6em;
  }

  .second {
    font-size: 1.3em;
    width: 29%;
  }

  .third {
    font-size: 1.2em;
    width: 27%;
  }

  .trophy {
    margin: 0 auto 0.5em auto;
    background: center / contain no-repeat;
  }

  .first .trophy {
    height: 9em;
    width: 9em;
    background-image: img-url('trophy/lichess-massive.svg');
  }

  .second .trophy {
    height: 9em;
    width: 7em;
    background-image: img-url('trophy/lichess-silver-1.svg');
  }

  .third .trophy {
    height: 7em;
    width: 7em;
    background-image: img-url('trophy/lichess-bronze-2.svg');
  }

  @include breakpoint($mq-not-xx-small) {
    .trophy {
      display: none;
    }
  }

  .user-link {
    font-weight: bold;
    letter-spacing: -1px;
  }

  .stats {
    margin: 0.5em auto 0 auto;
    font-size: 0.7em;

    th {
      letter-spacing: -1px;
      text-align: left;
    }

    td {
      font-weight: bold;
      padding-left: 5px;
      text-align: right;
    }
  }

  .third .stats {
    font-size: 0.8em;
  }
}
